<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="ext/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="jquery.tagsphere.js"></script>
    <script type="text/javascript">
	$(function(){
	    $('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
	    $('#ts2').tagcloud({centrex:175, centrey:175, min_font_size:10, max_font_size:16, zoom:100});
	});
    </script>

    <style type="text/css">
	body {font-family:arial, sans-serif;}
	#ts1 li a{
	    text-decoration:none;
	    color:white;
	}
	ul {list-style-type:none;}
</style>

</head>
<body>
<h1>Jquery Tag Sphere Plugin Example</h1>

<div id="ts1" style="width:500px; height:500px; background-color:#000;">
    <ul>
	<li><a href="#1" style="color:#f00;" rel="20">Link 1</a></li>
	<li><a href="#2" rel="15">Link 2</a></li>
	<li><a href="#3" rel="10">Link 3</a></li>
	<li><a href="#4" rel="5">Link 4</a></li>
	<li><a href="#5" rel="1">Link 5</a></li>
	<li><a href="#6" rel="5">Link 6</a></li>
	<li><a href="#7" rel="10">Link 7</a></li>
	<li><a href="#8" rel="15">Link 8</a></li>
	<li><a href="#9" style="color:#f00" rel="20">Link 9</a></li>
	<li><a href="#10" rel="15">Link 10</a></li>
	<li><a href="#11" rel="10">Link 11</a></li>
	<li><a href="#12" rel="5">Link 12</a></li>
	<li><a href="#13" rel="1">Link 13</a></li>
	<li><a href="#14" rel="5">Link 14</a></li>
	<li><a href="#15" rel="10">Link 15</a></li>
	<li><a href="#16" rel="15">Link 16</a></li>
	<li><a href="#17" style="color:#f00" rel="20">Link 17</a></li>
	<li><a href="#18" rel="15">Link 18</a></li>
	<li><a href="#19" rel="10">Link 19</a></li>
	<li><a href="#20" rel="5">Link 20</a></li>
	<li><a href="#21" rel="1">Link 21</a></li>
	<li><a href="#22" rel="10">Link 22</a></li>
    </ul>
</div>
&nbsp;
<div id="ts2" style="width:350px; height:350px; border:dashed 1px #000; background-color:#ffa; color:#f00;float:left;">
    <ul>
	<li><a href="#" rel="1">Link 1</a></li>
	<li><a href="#" rel="2">Link 2</a></li>
	<li><a href="#" rel="3">Link 3</a></li>
	<li><a href="#" rel="4">Link 4</a></li>
	<li><a href="#" rel="5">Link 5</a></li>
	<li><a href="#" rel="6">Link 6</a></li>
	<li><a href="#" rel="7">Link 7</a></li>
	<li><a href="#" rel="8">Link 8</a></li>
	<li><a href="#" rel="9">Link 9</a></li>
	<li><a href="#" rel="1">Link 10</a></li>
	<li><a href="#" rel="2">Link 11</a></li>
	<li><a href="#" rel="3">Link 12</a></li>
	<li><a href="#" rel="4">Link 13</a></li>
	<li><a href="#" rel="5">Link 14</a></li>
	<li><a href="#" rel="6">Link 15</a></li>
	<li><a href="#" rel="7">Link 16</a></li>
	<li><a href="#" rel="8">Link 17</a></li>
	<li><a href="#" rel="9">Link 18</a></li>
	<li><a href="#" rel="10">Link 19</a></li>
	<li><a href="#" rel="11">Link 20</a></li>
	<li><a href="#" rel="12">Link 21</a></li>
	<li><a href="#" rel="13">Link 22</a></li>
    </ul>
</div>
</body>
</html>
